<template>
	<view class="order_box">
		<view >
			<!-- <view class="order_item" v-for="(item,index) in 2" :key="index">
				<view class="df ac sb">
					<view class="order_status df ac f13">
						<i class="order_status_success mr5"></i>已支付
					</view>
					<view class="order_time f12">2024-10-22 16:28:27</view>
				</view>
				<view class="df ac sb" style="padding: 40rpx 0rpx 30rpx;border-bottom:1px solid #F7F8FC">
					<view class="f18">超级会员一年</view>
					<view class="">￥16800.00</view>
				</view>
				<view class="df ac sb" style="padding: 30rpx 0rpx 10rpx;">
					<view class="df ac">
						<text class="f13 mr5" style="display: block;color:gray;">实付款</text>￥16800.00
					</view>
					<view class="order_type f13">去开票</view>
				</view>
			</view> -->
			
			<view class="order_item" v-for="(item,index) in list" :key="index">
				<view class="df ac sb">
					<view class="order_status df ac f13">
						<i v-if="item.status == '未支付'" class="order_status_error mr5"></i>
						<i v-else class="order_status_success mr5"></i>
						{{item.status}}
					</view>
					<view class="order_time f12">{{ item.created_at }}</view>
				</view>
				<view class="df ac sb" style="padding: 40rpx 0rpx 30rpx;border-bottom:1px solid #F7F8FC">
					<view class="f18">{{ item.vip_name }}</view>
					<view class="">￥{{ item.need_price }}</view>
				</view>
				<view class="df ac sb" style="padding: 30rpx 0rpx 10rpx;">
					<view class="df ac">
						<text class="f13 mr5" style="display: block;color:gray;">待付金额</text>￥{{item.need_price}}
					</view>
					<view class="order_type f13" @click="operate(item)" v-if="item.status == '未支付'">{{ item.status == '未支付' ? '立即支付' : '去开票' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http';
	export default {
		data() {
			return {
				page:1,
				list:[]
			};
		},
		onLoad(){
			this.getList()
		},
		methods:{
			getList(){
				// user/orderVip
				http.request('user/orderVip').then(res=>{
					// console.log(res)
					this.list = res.data.list
				})
			},
			operate(item){
				if(item.status == '未支付'){
					this.goPay(item.vip_id)
				}
			},
			goPay(id) {
				const data = {
					vip_id:id
				}
				http.request('user/vipRecharge', data).then((res) => {
					console.log(res);
					const info = res.data.wechatPay;
					uni.requestPayment({
						timeStamp: info.timeStamp,
						nonceStr: info.nonceStr,
						package: info.package,
						signType: info.signType,
						paySign: info.sign,
						success: (res) => {
							uni.showModal({
								title: '充值成功',
								content: '恭喜您成为夕腾外协会员供应商',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 1
										});
									}
								}
							});
						},
						fail: (res) => {
							console.log(res);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					})
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
		}
	}
</script>

<style lang="scss">
page{
	background:#F7F8FC;
	padding:30rpx;
	box-sizing: border-box;
}
.order_box{
	.order_item{
		padding:25rpx;
		border-radius:14rpx;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 40rpx;
	}
	.order_status{
		i{
			width: 10rpx;
			height: 10rpx;
		}
	}
	.order_time{
		color:gray;
	}
	.order_status_success{
		background: green;
	}
	.order_status_error{
		background-color: red;
	}
	.order_type{
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 40rpx;
		border: 1px solid darkgray;
		color:#333333;
		width: 160rpx;
	}
}
</style>
